<template>
	<view>
		<view class="top-block">
			<view class="check-time-block">
				<view class="left-check-option">
					<view class="txt" @click="beginTimeOpen()">
						{{lastDateStr}}
					</view>
					<uni-icons type="bottom" size="16" color='#000'></uni-icons>
					<view style="padding:0 24rpx;">-</view>
					<view class="txt" @click="endTimeOpen()">
						{{nowDateStr}}
					</view>
					<uni-icons type="bottom" size="16" color='#000'></uni-icons>
				</view>
				<view class="right-option" @click="detailClick">
					查看月账
				</view>
			</view>
			<view class="block" style="background: #fff;">
				<view class="lst-item" style="padding: 0 24rpx;">
					<view class="item-option">
						<view class="txt">店铺总销售</view>
						<view class="price">
							{{data25||0}}
						</view>
						<uni-icons type="right" size="16" color='#000'></uni-icons>
					</view>

					<view class="item-option">
						<view class="txt">即开总销售</view>
						<view class="price">
							{{data23||0}}
						</view>
						<uni-icons type="right" size="16" color='#000'></uni-icons>
					</view>

					<view class="item-option">
						<view class="txt">电票总销售</view>
						<view class="price">
							{{data8||0}}
						</view>
						<uni-icons type="right" size="16" color='#000'></uni-icons>
					</view>

					<view class="item-option">
						<view class="txt">竞彩总销售</view>
						<view class="price">
							{{data7||0}}
						</view>
						<uni-icons type="right" size="16" color='#000'></uni-icons>
					</view>
				</view>
			</view>
			<view class="block">
				<view class="tab-block">
					<view class="tab-item" @click="tabClick(0)" :class="indexCurrent==0?'check-item':'none-item'">
						等待审核
						<view class="item-border" v-if="indexCurrent==0"></view>
					</view>
					<view class="tab-item" @click="tabClick(2)" :class="indexCurrent==2?'check-item':'none-item'">
						已审核
						<view class="item-border" v-if="indexCurrent==2"></view>
					</view>
					<view class="tab-item" @click="tabClick(1)" :class="indexCurrent==1?'check-item':'none-item'">
						已驳回
						<view class="item-border" v-if="indexCurrent==1"></view>
					</view>
				</view>
			</view>
			<scroll-view scroll-y="true" @scrolltolower="lowerBottom" class="scroll-class">
				<view class="item" v-for="(item,index) in lst" :key="index">
					<view class="header-option">
						<view class="border-item item-blue" v-if="indexCurrent==0"></view>
						<view class="border-item item-yellow" v-if="indexCurrent==2"></view>
						<view class="border-item item-red" v-if="indexCurrent==1"></view>
						<view class="txt">账号编号:{{item.id}}</view>
					</view>
					<view class="content-option">
						<view class="txt-option">
							<view class="label-txt">即开入站</view>
							<view class="content-txt">￥{{item.data0}}</view>
						</view>
						<view class="txt-option">
							<view class="label-txt">即开调出</view>
							<view class="content-txt">￥{{item.data1}}</view>
						</view>
						<view class="txt-option">
							<view class="label-txt">传统机销售</view>
							<view class="content-txt">￥{{item.data3}}</view>
						</view>
						<view class="txt-option">
							<view class="label-txt">备用金</view>
							<view class="content-txt">￥{{item.data2}}</view>
						</view>
						<view class="txt-option">
							<view class="label-txt">账户余额</view>
							<view class="content-txt">￥{{item.data21}}</view>
						</view>
						<view class="txt-option">
							<view class="label-txt">今日差额</view>
							<view class="content-txt">￥{{item.data22}}</view>
						</view>
						<view class="txt-option">
							<view class="label-txt">今日总销量</view>
							<view class="content-txt">￥{{item.data25}}</view>
						</view>
						<view class="txt-option">
							<view class="label-txt">状态</view>
							<view class="content-txt blue-color" v-if="item.status==0">等待审核</view>
							<view class="content-txt yellow-color" v-if="item.status==1">已审核</view>
							<view class="content-txt red-color" v-if="item.status==2">已驳回</view>
						</view>
						<view class="txt-option">
							<view class="label-txt">修改时间</view>
							<view class="content-txt">{{getDate(item.updateTime)}}</view>
						</view>
						<view class="txt-option">
							<view class="label-txt">添加时间</view>
							<view class="content-txt">{{getDate(item.createTime)}}</view>
						</view>
						<view class="txt-option" v-if="item.status==0">
							<view class="label-txt">驳回原因</view>
							<view class="content-txt">{{item.remark}}</view>
						</view>
					</view>
					<view class="tools-option">
						<view class="btn-tools edit" v-if="item.status==0" @click="editBillClick(item)">编辑</view>
						<view class="btn-tools del" v-if="item.status==1" @click="editBillClick(item)">修改</view>
						<view class="btn-tools look" v-if="item.status==2">查看详情</view>
					</view>
				</view>
				<view style="height: 120rpx;"></view>
				<emty v-if="lst.length==0"></emty>
			</scroll-view>
		</view>
		<u-datetime-picker ref='beginTimePickerRef' :show="beginTimeShow" v-model="recordParam.beginTime"
			@confirm="beginConfirm" @cancel='beginTimeShow=false' mode="date"></u-datetime-picker>

		<u-datetime-picker ref='endTimePickerRef' :show="endTimeShow" v-model="recordParam.endTime"
			@confirm="endConfirm" @cancel='endTimeShow=false' mode="date"></u-datetime-picker>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				beginTimeShow: false,
				endTimeShow: false,
				statusBarHeight: "",
				indexCurrent: 0,
				year: 2023,
				lastMonth: 11,
				month: 11,
				lastDateStr: '',
				nowDateStr: '',
				userInfo: {},
				lst: [],
				recordParam: {
					beginTime: '',
					endTime: '',
					page: 0,
				},
				page: 0,
				status: 0,
				data7: 0,
				data8: 0,
				data23: 0,
				data25: 0,
			}
		},
		mounted() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 37 + 'px'
		},
		onload() {},
		onShow() {
			// this.getUserInfo()
			this.initDate()
		},
		onReachBottom() {
			let beginTimeStr = this.recordParam.beginTime.toString()
			let endTimeStr = this.recordParam.endTime.toString()
			this.$http('manageMent.getBillList', {
				page: this.lst.length,
				status: this.indexCurrent,
				token: this.$tools.getToken(),
				beginTime: beginTimeStr.slice(0, this.recordParam.beginTime.length - 3),
				endTime: endTimeStr.slice(0, this.recordParam.endTime.length - 3),
			}).then(res => {
				this.data7 = res.data.data7
				this.data8 = res.data.data8
				this.data23 = res.data.data23
				this.data25 = res.data.data25
				if (res.code == 200) {
					if (res.data.list.length > 0) {
						this.lst.push(...res.data.list)
					}
				}
			})
		},
		methods: {
			init() {
				let beginTimeStr = this.recordParam.beginTime.toString()
				let endTimeStr = this.recordParam.endTime.toString()

				this.$http('manageMent.getBillList', {
					page: this.page,
					status: this.indexCurrent,
					token: this.$tools.getToken(),
					beginTime: beginTimeStr.slice(0, beginTimeStr.length - 3),
					endTime: endTimeStr.slice(0, endTimeStr.length - 3),
				}).then(res => {
					console.log('res=', res)
					if (res.code == 200) {
						this.lst = res.data.list
						this.data7 = res.data.data7
						this.data8 = res.data.data8
						this.data23 = res.data.data23
						this.data25 = res.data.data25
					}
				})
			},
			getUserInfo() {
				this.$http('user.getInformation', {
					token: this.$tools.getToken()
				}).then(res => {
					if (res.code == 200) {
						this.userInfo = res.data.data
						uni.setStorageSync('userInfo', res.data.data)
					}
				})
			},

			initDate() {
				let startDate = new Date();
				let endDate = new Date();
				this.year = startDate.getFullYear(); //获取完整的年份(4位)
				this.month = startDate.getMonth(); //获取当前月份(0-11,0代表1月)	
				this.lastMonth = startDate.getMonth() - 1; //获取当前月份(0-11,0代表1月)
				startDate.setFullYear(this.year)
				startDate.setMonth(this.lastMonth)
				endDate.setFullYear(this.year)
				endDate.setMonth(this.month)

				this.recordParam.beginTime = startDate.getTime(),
					this.recordParam.endTime = endDate.getTime()
				this.lastDateStr = uni.$u.timeFormat(this.recordParam.beginTime, 'yyyy-mm-dd');
				this.nowDateStr = uni.$u.timeFormat(this.recordParam.endTime, 'yyyy-mm');
				this.init()
				// this.getIntegralRecordInfo()

			},
			tabClick(index) {
				this.indexCurrent = index
				this.recordParam.page = 0
				this.lst = []
				this.init()
			},
			navGo(path) {
				uni.navigateTo({
					url: path
				})
			},
			beginTimeOpen() {
				this.$refs.beginTimePickerRef.innerValue = this.recordParam.beginTime
				this.beginTimeShow = true

			},
			beginConfirm(e) {
				console.log('e', e)
				this.recordParam.beginTime = e.value
				this.lastDateStr = uni.$u.timeFormat(this.recordParam.beginTime, 'yyyy-mm-dd')

				this.beginTimeShow = false
				// this.getIntegralRecordInfo()

			},
			endTimeOpen() {
				this.$refs.endTimePickerRef.innerValue = this.recordParam.endTime
				this.endTimeShow = true
			},

			endConfirm(e) {
				console.log('confirm', e);
				this.recordParam.endTime = e.value
				this.nowDateStr = uni.$u.timeFormat(this.recordParam.endTime, 'yyyy-mm')

				this.endTimeShow = false
				// this.getIntegralRecordInfo()

			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}

				return value
			},
			detailClick() {
				uni.navigateTo({
					url: '/pages/manageMent/billingDetail'
				})
			},
			editBillClick(item) {
				uni.setStorageSync('billItem', item)
				uni.navigateTo({
					url: '/pages/manageMent/editBill?type=1'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F4F5FC;
		// height: 100vh;
	}

	.top-block {
		position: sticky;
		top: 0;
		background: #F4F5FC;
		z-index: 999;
	}

	.check-time-block {
		margin-top: 42rpx;
		display: flex;
		align-items: center;
		margin-left: 24rpx;
		margin-right: 24rpx;

		.left-check-option {
			flex: auto;
			display: flex;
			align-items: center;

			.txt {
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
				margin-right: 14rpx;
			}

		}

		.right-option {
			display: flex;
			align-items: center;
			flex: none;
			color: #0089CF;
			font-size: 32rpx;
		}
	}

	.scroll-class {
		height: calc(100vh - 100rpx);

		.item {
			border-radius: 8rpx;
			background: #fff;
			margin: 24rpx;
			padding: 0 24rpx;

			.header-option {
				display: flex;
				align-items: center;
				padding-top: 24rpx;
				padding-bottom: 24rpx;
				border-bottom: 1rpx solid #EFEFEF;

				.border-item {
					border-radius: 26rpx;
					width: 8rpx;
					height: 34rpx;
				}

				.item-blue {
					background: #42A2DE;
				}

				.item-yellow {
					background: #49cc90;
				}

				.item-red {
					background: red;
				}

				.txt {
					margin-left: 14rpx;
				}
			}

			.blue-color {
				color: #42A2DE;
			}

			.yellow-color {
				color: #49cc90;
			}

			.red-color {
				color: red;
			}

			.content-option {
				padding-bottom: 24rpx;
				padding-top: 24rpx;

				.txt-option {
					padding: 18rpx 0;
					display: flex;
					border-bottom: 1rpx solid #EFEFEF;

					.label-txt {
						text-align: right;
						width: 160rpx;
						flex: none;
					}

					.content-txt {
						flex: auto;
						margin-left: 24rpx;
						display: flex;
						flex-wrap: wrap;
						line-height: 1.5em;
					}

				}

			}

			.tools-option {
				padding: 16rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				.btn-tools {
					padding: 8rpx 24rpx;
					border-radius: 8rpx;
				}

				.edit {
					border: 1rpx solid #42A2DE;
					color: #42A2DE;
				}

				.look {
					border: 1rpx solid #49cc90;
					color: #49cc90;
				}

				.del {
					border: 1rpx solid red;
					color: red;
				}
			}
		}
	}

	.block {
		margin-top: 32rpx;
		// background: #fff;
		border-radius: 16rpx;

		.tab-block {
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			height: 104rpx;
			border-bottom: 1rpx solid #F4F5FC;
			background: #fff;

			.tab-item {
				width: 33%;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;

				.item-border {
					position: absolute;
					width: 36rpx;
					height: 6rpx;
					background: #0089CF;
					border-radius: 440rpx 440rpx 440rpx 440rpx;
					left: 100rpx;
					top: 60rpx;
					right: 0;
					display: flex;
					align-items: center;
				}
			}

			.none-item {
				font-size: 28rpx;
				color: #333333;
			}

			.check-item {
				font-size: 30rpx;
				font-weight: normal;
				color: #000000;
			}
		}

		.item-option {
			.item {
				height: 156rpx;
				margin: 0 24rpx;
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #EFEFEF;

				.icon {
					flex: none;
					width: 76rpx;
					height: 76rpx;
				}

				.right-info {
					flex: auto;
					margin-left: 24rpx;

					.hint-txt {
						display: flex;
						align-items: center;

						.txt {
							flex: auto;
							font-size: 30rpx;
							font-weight: bold;
							color: #020B00;
						}

						.status-color {
							flex: none;
							font-size: 30rpx;
							font-weight: 500;
							color: #0089CF;
						}

						.jian {
							font-size: 30rpx;
							font-weight: 500;
							color: #020B00;
						}
					}

					.date {
						margin-top: 16rpx;
						font-size: 24rpx;
						color: #999999;

					}
				}
			}
		}
	}


	.lst-item {

		.item-option {
			display: flex;
			align-items: center;
			padding: 24rpx 0;
			border-bottom: 1rpx solid #EFEFEF;

			.icon {
				border: 1rpx solid red;
				width: 34rpx;
				height: 34rpx;
			}

			.txt {
				margin-left: 14rpx;
				font-size: 28rpx;
			}

			.number-s {
				flex: auto;
				text-align: center;
			}

			.price {
				text-align: right;
				flex: auto;
				margin-right: 24rpx;
			}
		}
	}
</style>